<template>
  <el-menu :router="true" :default-active="$route.path">
    <template v-for="menu in menus" :key="menu.path">
      <el-sub-menu v-if="menu.children?.length" :index="menu.path">
        <template #title>{{ menu.name }}</template>
        <el-menu-item v-for="child in menu.children" :key="child.path" :index="child.path">
          {{ child.name }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="menu.path">{{ menu.name }}</el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { useUserStore } from '@/store/user';
export default {
  setup() {
    const userStore = useUserStore();
    return { menus: userStore.menus };
  }
};
</script>
